<template>
    <div class="bg">
        <div class="header">
            <div class="header-btnLeft" @click="$router.go(-1)" ><img src="../assets/back-btn.png"></div>
            <h1 class="header-title">注册</h1>
            <div class="header-btnRight"></div>
        </div>
        <div class="h120"></div>
        <div class="login">
            <div class="login-item"><input type="text" name="username" v-model="username" placeholder="昵称"/></div>
            <div class="login-item"><input type="password" name="password" v-model="password" placeholder="请输入6~12位密码"/></div>
            <div class="login-item"><input type="password" name="password2" v-model="password2" placeholder="请再次输入密码"/></div>
        </div>
        <div  class="login-btn">
            <button  class="login-btn-login" @click="regSubmit">完成</button>
        </div>



    </div>
</template>

<script>
    import { Toast } from 'mint-ui';
    import storage from '../store/localstorage';
    import store from '../store/store';
    import * as types from '../store/types'
    export default {
        name: "My-login",
        data(){
            return{
                country_code:'',
                phone:'',
                email:'',
                username:'',
                password:'',
                password2:'',
            }
        },
        methods:{
            //打开关闭帮助div
            regSubmit() {
                var regNick = new RegExp("^([a-zA-Z0-9_-]|[\u4E00-\u9FA5]){2,20}$");
                var username=this.username;
                if (username.length < 2) {
                    Toast({message: '请输入大于2位的昵称',duration: 1000});
                    return false;
                } else if (!regNick.test(username)) {
                    Toast({message: '昵称只能包含数字、字母、中文、_、-',duration: 1000});
                    return false;
                }

                var password=this.password;
                if (password.length < 6) {
                    Toast({message: '请输入大于或等于6的密码',duration: 1000});
                    return false;
                }
                var password2=this.password2;
                if (password2.length < 6) {
                    Toast({message: '请输入大于或等于6的密码',duration: 1000});
                    return false;
                }
                if(password!=password2){
                    Toast({message: '两次输入的密码不一致',duration: 1000});
                }

                var params={
                    thumb:storage.get('thumb'),
                    country_code:this.country_code,
                    telphone:this.phone,
                    email:this.email,
                    nickname:username,
                    password:password
                }
                this.axios.post('api/member/register', params)
                    .then(res => {
                        console.log(res);
                        Toast({message: '恭喜您，注册成功！',duration: 2000});
                        storage.set('userinfo',res.data)
                        store.commit(types.LOGIN, res.data.token)
                        res.data.Integral.forEach((item)=>{
                            if (item.types==1){
                                storage.set('product_integra',item)
                            } else if (item.types == 2){
                                storage.set('comment_integra', item)
                            }
                        })
                        setTimeout(()=>{
                            if(storage.get('loginurl')){
                                var loginurl=storage.get('loginurl')
                                storage.remove('loginurl')
                                this.$router.push({path:loginurl})
                            }else{
                                this.$router.push({path:'/my'})
                            }

                        },1000)
                    })
                    .catch(err => console.log(err));
            },
        },
        mounted(){
            this.country_code=this.$route.query.country_code;
            var phone=this.$route.query.phone;
            //var regMobile = new RegExp("^(1)[0-9]{10}$");
            //var regEmail = new RegExp("^([A-Za-z0-9_\\-\\.])+\\@([A-Za-z0-9_\\-\\.])+\\.([A-Za-z]{2,4})$");
            if (phone) {
               this.phone=phone
            }else{
                Toast({message: '参数错误',duration: 2000});
                return;
            }


        }
    }
</script>

<style lang="scss" scoped>
    @import "../assets/base";
    .bg{
        background: $bgcolor1;
        min-height: 100%;
    }
    .h30 {
        height: rpx(30);
        background: $bgcolor1
    }
    .h120 {
        height: rpx(120);
        background: $bgcolor1;
    }
    .header{
        display: flex;
        align-items: center;
        padding: rpx(10) rpx(30);
        justify-content: space-between;
        background:$color0;
        &-btnLeft{
            width: rpx(64);
            height: rpx(64);
            padding-top: rpx(16);
            img{
                width: rpx(32);
                height: rpx(32);
            }
        }
        &-btnRight:after{
            display: block;
            content: ' ';
            width: rpx(64);
            height: rpx(64);
        }
        &-title{
            flex: 1;
            font-size: rpx(36);
            text-align: center;
            font-weight: normal;
        }
    }
    .login{
        margin: rpx(30);
        background: $color0;
        &-item{
            border-bottom: solid 1px $color2;
            padding: rpx(20) 0;
            &:last-child{
                border-bottom:none;
            }
            input{
                padding: rpx(10) rpx(30);
                font-size: rpx(34);
            }
        }
        &-btn{
            padding: rpx(30);
            &-login{
                display: block;
                margin-bottom: rpx(30);
                border: none;
                width: 100%;
                height: rpx(100);
                line-height: rpx(100);
                background: $color3;
                border-radius: $radius6;
                color: $color0;
                font-size: rpx(34);
                text-align: center;
            }
        }

    }



</style>